<template>
	<transition name="el-zoom-in-center">
		<el-card v-if="visible" v-click-outside="close" :style="`top: ${axis.y + 5}px;left: ${axis.x - 14}px;width:600px`"
		         class="overclock-slider">
			<template #header>{{ `超频设置：${data.building.buildingName}` }}</template>
			<el-form label-width="auto" style="margin: 0">
				<el-form-item label="超频倍率">
					<el-slider v-model="overclock" :marks="OVERCLOCK_PERCENTAGE_MARKS" :max="2.5" :min="0.01" :step="0.01" show-input></el-slider>
				</el-form-item>
				<el-form-item label="建筑数量" style="margin-top: 30px">
					<el-slider v-model="buildingCount" :max="buildingCountMax" :min="0.01" :step="1" show-input></el-slider>
				</el-form-item>
			</el-form>
			<template #footer>
				<div style="display: flex">
					<el-button type="primary" @click="onConfirmOverclock">确认</el-button>
					<el-button @click="close">关闭</el-button>
					<el-text style="margin-left: auto" type="warning">建筑数量仅供参考，以超频倍率为准</el-text>
				</div>
			</template>
		</el-card>
	</transition>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue'
import {OVERCLOCK_PERCENTAGE_MARKS} from '@/utils/constantsUtil'
import Fraction from 'fraction.js'

const emits = defineEmits<{
	(e: 'confirmOverclock', value: typeof overclock.value): void
}>()

const visible = ref(false)

const data = ref<OverclockData>()

const axis = reactive<Axis>({
	x: 0,
	y: 0
})

// 超频倍率（小数）
const overclock = ref<number>(1)

// 建筑数量
const buildingCount = computed<number>({
	get: () => data.value.building.countExactFractionOriginal.numerator / data.value.building.countExactFractionOriginal.denominator / overclock.value,
	set: (value: number) => {
		// 保留两位小数
		overclock.value = Math.round(data.value.building.countExactFractionOriginal.numerator / data.value.building.countExactFractionOriginal.denominator / value * 100) / 100
	}
})

// 建筑数量最大值
const buildingCountMax = ref<number>()

const open = (overclockData: OverclockData, axisParam: Axis) => {
	// 相关数据赋值
	data.value = overclockData
	overclock.value = overclockData.building.overclock
	const originalBuildingCountFraction = new Fraction(overclockData.building.countExactFractionOriginal.numerator, overclockData.building.countExactFractionOriginal.denominator)
	const maxBuildingCountFraction = originalBuildingCountFraction.div(0.01)
	buildingCountMax.value = maxBuildingCountFraction.valueOf()
	// 获取视口宽度和高度
	const viewportWidth = window.innerWidth
	const viewportHeight = window.innerHeight
	// 计算卡片宽度和高度
	const cardWidth = 600 // 固定宽度
	const cardHeight = 300 // 估计高度，可以根据实际情况调整
	// 调整坐标以确保卡片不会溢出视口
	axis.x = Math.min(Math.max(0, axisParam.x - 14), viewportWidth - cardWidth)
	axis.y = Math.min(Math.max(0, axisParam.y + 5), viewportHeight - cardHeight)
	// 显示
	visible.value = true
}

const close = () => {
	visible.value = false
}

const onConfirmOverclock = () => {
	emits('confirmOverclock', overclock.value)
	visible.value = false
}

defineExpose({
	open,
	close
})

</script>

<style lang="scss" scoped>
.overclock-slider {
	position: fixed;
	z-index: 1000;
}

:deep(.el-slider__input) {
	width: 150px;
}

</style>
